<template>
  <div class="sign">
    <div
      v-if="!batch"
      v-loading="loading"
      class="imgBox"
      :style="'width: '+width+' !important; height: '+height+' !important'"
    >
      <el-image
        v-if="src"
        :style="'width: '+width+' !important; height: '+height+' !important'"
        :src="src"
        :preview-src-list="[src]"
      />
    </div>
    <div
      v-else
      v-loading="loading"
    >
      <template v-if="src">
        <el-image
          v-for="(url, index) in src.split(',')"
          :key="index"
          :style="'width: '+width+' !important; height: '+height+' !important'"
          :src="url"
          :preview-src-list="src.split(',')"
        />
      </template>
    </div>
    <el-button v-if="!detail" type="text" size="mini" style="height: 30px;" @click="HWInitialize">签字</el-button>
  </div>
</template>

<script>
import { dataURLtoFile } from '@/assets/dataURLtoFile.js';
import { getToken } from '@/utils/auth';
import axios from 'axios';
class UploadOptions {
  url = window.server.SERVER_API[0].api + '/files/imgUpload';
  // url = process.env.VUE_APP_BASE_API + '/files/imgUpload';
  // url = getToken('api_domain') + '/files/imgUpload';
  header = {
    'Authentication': getToken('auth_key') ? getToken('auth_key') : '',
    'userId': getToken('session_id') ? getToken('session_id') : '',
    'clientType': 0
  }
}
export default {
  name: 'Sign',
  props: {
    // 图片路径
    src: {
      type: String,
      default() {
        return '';
      }
    },
    // 是否是详情，详情只展示不签名
    detail: {
      type: Boolean,
      default() {
        return false;
      }
    },
    // 是否批量签名
    batch: {
      type: Boolean,
      default() {
        return false;
      }
    },
    width: {
      type: String,
      default() {
        return '200px';
      }
    },
    height: {
      type: String,
      default() {
        return '100px';
      }
    }
  },
  data() {
    return {
      uploadOptions: new UploadOptions(),
      intval: null,
      loading: false
    };
  },
  watch: {

  },
  mounted() {

  },
  methods: {
    HWInitialize() {
      let that = this;
      axios({
        // 请求方式
        method: 'GET',
        // 请求地址
        url: 'http://127.0.0.1:29999/HWPenSign/HWInitialize',
        // URL中的查询参数
        params: {
          'nLogo': '签名',
          'nPenwidth': '2',
          'nOrgX': '100',
          'nOrgY': '200',
          'width': '500',
          'height': '300',
          'fingerFap': '1',
          'key': '7C74BEDBC0B6CCCDF0494CA2AA03FD07'
        }
      }).then(function(result) {
        if (result.data.msgID == 0) {
          that.intval = setInterval(that.getSign, 2000);
        } else {
          if (result.data.message == 'Device Not Found') {
            that.$message({
              message: '没有找到签字设备，请检查设备是否连接',
              type: 'warning'
            });
          } else if (result.data.message == 'Application not started') {
            that.$message({
              message: '未找到相应的应用程序，请先下载安装',
              type: 'warning'
            });
          } else {
            alert(result.data.message);
          }
        }
      });
    },
    getSign() {
      let that = this;
      axios({
        // 请求方式
        method: 'GET',
        // 请求地址
        url: 'http://127.0.0.1:29999/HWPenSign/HWGetSign',
        // URL中的查询参数
        params: {
          'nImageType': '3',
          'nImageWidth': '500',
          'nImageHeight': '300',
          dataType: 'jsonp'
        }
      }).then(function(result) {
        console.log(result.data);
        if (result.data.msgID == 0) {
          clearInterval(that.intval);
          that.dataURLtoBlob(result.data.message, '签名.png');
        } else if (result.data.msgID == -15) {
          clearInterval(that.intval);
        }
      });
    },
    dataURLtoBlob(dataurl, name) {
      this.loading = true;
      let file = dataURLtoFile(dataurl, name);
      this.onchangemd(file);
      console.log(file);
    },
    onchangemd(fileData) {
      let that = this;
      let formData = new FormData();
      let fileOfBlob = new File([fileData], new Date() + '.jpg'); // 命名图片名
      formData.append('file', fileOfBlob);
      // axios.post(process.env.VUE_APP_BASE_API + '/files/imgUpload', formData, {
      axios.post(window.server.SERVER_API[0].api + '/files/imgUpload', formData, {
        // 因为我们上传了图片,因此需要单独执行请求头的Content-Type
        headers: {
          // 表示上传的是文件,而不是普通的表单数据
          'Content-Type': 'multipart/form-data',
          'Authentication': getToken('auth_key') ? getToken('auth_key') : '',
          'userId': getToken('session_id') ? getToken('session_id') : '',
          'clientType': 0
        }
      }).then(function(res) {
        if (res.data.code == 200) {
          if (that.batch) {
            let src = that.src ? that.src.split(',') : [];
            src.push(res.data.data);
            that.src = src.join(',');
            that.$emit('singnSrc', that.src);
          } else {
            that.src = res.data.data;
            that.$emit('singnSrc', res.data.data);
          }
        }
        that.loading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.sign {
  display: flex;
  justify-content: flex-start;
  // .imgBox {
  //   width: 202px;
  //   height: 102px;
  //   border: 1px dashed #808080;
  // }
}
</style>
